<template>
  <div class="instructions-details shadow-box padding-box">
    <div class="operate-bar">
      <div class="btn-group">
        <el-button
          v-if="info.assign_status < 2"
          type="primary"
          size="default"
          @click="assignAdd"
          >新增交办单</el-button
        >
        <el-button
          type="success"
          size="default"
          :disabled="info.assign_status == 2"
          @click="assignFinish"
        >
          {{ info.assign_status == 2 ? "已办结" : "办结" }}
        </el-button>
        <el-button type="info" size="default" @click="goBack">返回</el-button>
      </div>
    </div>
    <el-collapse v-if="info" v-model="activeNames" :accordion="false">
      <el-collapse-item
        v-for="(item, index) in collapseItems"
        :key="item.id"
        :title="item.title"
        :name="index"
      >
        <template #title>{{ item.title }}</template>
        <!-- 项目信息 -->
        <div v-if="item.id == 1">
          <div class="desc">
            <label>项目名称：</label>
            <span>{{ info.project_name }}</span>
          </div>
          <div class="desc">
            <label>建设单位：</label>
            <span>{{ info.responsible_unit_name }}</span>
          </div>
          <div class="desc">
            <label>总投资：</label>
            <span>{{ info.investment }} （万元）</span>
          </div>
          <div class="desc">
            <label>项目类型：</label>
            <span>{{ info.Invest_type }} （万元）</span>
          </div>
          <div class="desc">
            <label
              >{{
                info.fact_start_date != "" ? "计划开工日期" : "实际开工日期"
              }}：</label
            >
            <span>{{
              info.fact_start_date != ""
                ? info.fact_start_date
                : info.plan_start_date
            }}</span>
          </div>
        </div>
        <!-- 批示信息 -->
        <div v-if="item.id == 2">
          <div class="desc">
            <label>批示领导：</label>
            <span>{{ info.leader_name }}</span>
          </div>
          <div class="desc">
            <label>批示内容：</label>
            <span>{{ info.instruct_content }}</span>
          </div>
          <div class="desc">
            <label>批示日期：</label>
            <span>{{ info.instruct_date }}</span>
          </div>
        </div>
      </el-collapse-item>

      <div class="assign-title">交办单</div>
      <template v-if="info.assignList && info.assignList.length > 0">
        <el-tabs v-model="active" type="border-card" tab-position="top">
          <el-tab-pane
            v-for="item in info.assignList"
            :key="item.id"
            :label="item.undertake_dept_name"
            :name="item.id + ''"
          >
            <div class="step-wrapper">
              <el-steps
                :active="getStepStatus(parseInt(item.status))"
                finish-status="success"
                align-center
              >
                <el-step
                  v-for="(step, index) in stepOptions"
                  :key="index"
                  :icon="step.icon"
                  :title="step.title"
                ></el-step>
              </el-steps>
            </div>
            <el-collapse v-model="activeNames" :accordion="false">
              <el-collapse-item title="交办信息" name="assign">
                <div class="desc">
                  <label> 问题来源： </label>
                  <span>
                    {{ item.source_type }}
                  </span>
                </div>
                <div class="desc">
                  <label> 问题描述： </label>
                  <span>
                    {{ item.problem_desc }}
                  </span>
                </div>
                <div class="desc">
                  <label> 交办意见： </label>
                  <span>
                    {{ item.assign_opinion }}
                  </span>
                </div>
                <div class="desc">
                  <label> 交办人： </label>
                  <span>
                    {{ item.assigner_name }}
                  </span>
                </div>
                <div class="desc">
                  <label> 交办日期： </label>
                  <span>
                    {{ item.assign_date }}
                  </span>
                </div>
                <div class="desc">
                  <label> 反馈截止日期： </label>
                  <span>
                    {{ item.feedback_date_require }}
                  </span>
                </div>
              </el-collapse-item>
              <el-collapse-item
                v-if="item.mendList && item.mendList.length > 0"
                title="反馈单"
                name="feedback"
              >
                <el-tabs
                  v-model="activeFeedBack"
                  type="border-card"
                  tab-position="top"
                >
                  <el-tab-pane
                    v-for="(feedback, index) in item.mendList"
                    :key="'fb_' + index"
                    :label="`第 ${item.mendList.length - index} 次反馈`"
                    :name="feedback.id"
                  >
                    <div>
                      <div class="desc">
                        <label> 反馈结果： </label>
                        <span>
                          {{ feedback.mend_feedback }}
                        </span>
                      </div>
                      <div class="desc">
                        <label> 是否已与建设单位协调一致： </label>
                        <span>
                          {{ feedback.mend_unanimous }}
                        </span>
                      </div>
                      <div class="desc">
                        <label> 反馈日期： </label>
                        <span>
                          {{ feedback.mend_time }}
                        </span>
                      </div>
                    </div>
                    <el-divider></el-divider>
                    <template v-if="feedback.check_status != ''">
                      <div>
                        <div class="desc">
                          <label> 评价结果： </label>
                          <span>
                            {{ feedback.check_status == 0 ? "满意" : "不满意" }}
                          </span>
                        </div>
                        <div class="desc">
                          <label> 评价内容： </label>
                          <span>
                            {{ feedback.check_opinion }}
                          </span>
                        </div>
                        <div class="desc">
                          <label> 评价时间： </label>
                          <span>
                            {{ feedback.check_time }}
                          </span>
                        </div>
                      </div>
                    </template>
                    <!-- 结果评价表单 -->
                    <template v-if="item.status == '1'">
                      <el-form
                        :model="form"
                        ref="form"
                        :rules="rules"
                        label-width="100px"
                        :inline="false"
                      >
                        <el-form-item label="审核意见：" prop="check_opinion">
                          <el-input
                            type="textarea"
                            v-model="form.check_opinion"
                            placeholder="请输入审核意见"
                            :autosize="{
                              minRows: 5,
                              maxRows: 10,
                            }"
                          ></el-input>
                        </el-form-item>
                        <el-form-item label="审核结果：" prop="check_status">
                          <el-select
                            style="width: 100px"
                            v-model="form.check_status"
                            value-key=""
                            placeholder=""
                          >
                            <el-option
                              :key="0"
                              label="满意"
                              :value="0"
                            ></el-option>
                            <el-option
                              :key="1"
                              label="不满意"
                              :value="1"
                            ></el-option>
                          </el-select>
                        </el-form-item>
                        <el-form-item label="">
                          <el-button type="primary" @click="saveEvaluation"
                            >审核</el-button
                          >
                        </el-form-item>
                      </el-form>
                    </template>
                  </el-tab-pane>
                </el-tabs>
              </el-collapse-item>
            </el-collapse>
          </el-tab-pane>
        </el-tabs>
      </template>
      <template v-else>
        <el-empty description="暂无交办单"></el-empty>
      </template>
    </el-collapse>
    <AssignForm
      :visible.sync="dialog.assign"
      :current="info"
      @update="initData"
    ></AssignForm>
  </div>
</template>

<script>
import SearchItem from "@/components/Common/SearchItem.vue";
import {
  addInstructionsEvaluation,
  getInstructionsDetails,
  postAssignFinish,
} from "@/api/LeaderInstructions/Index";
import AssignForm from "./AssignForm.vue";
import { required } from "@/utils/eValidate";
export default {
  name: "EvaluationDetails",
  components: { SearchItem, AssignForm },
  data() {
    return {
      id: 0,
      // 当前交办单ID
      active: "",
      // 当前反馈单ID
      activeFeedBack: "",
      activeNames: [1],
      collapseItems: [
        { id: 1, title: "项目信息" },
        { id: 2, title: "批示信息" },
      ],
      panes: [],
      info: null,
      stepOptions: [
        { icon: "", title: "领导批示" },
        { icon: "", title: "问题交办" },
        { icon: "", title: "交办反馈" },
        { icon: "", title: "反馈评价" },
      ],
      dialog: {
        assign: false,
      },
      form: {
        check_opinion: "",
        check_status: "",
      },
      rules: {
        check_opinion: [required],
        check_status: [required],
      },
    };
  },
  methods: {
    assignAdd() {
      this.dialog.assign = true;
    },
    assignFinish() {
      this.$confirm("确认后无法再对当前问题进行交办", "办结确认", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "success",
      })
        .then(() => {
          postAssignFinish({ id: this.id }).then((res) => {
            if (res.code == 0) {
              this.$message.success("问题整体办结成功");
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消",
          });
        });
    },
    initData() {
      getInstructionsDetails({ id: this.id }).then((res) => {
        if (res.code == 0) {
          this.info = res.data;
        }
      });
    },
    saveEvaluation() {
      addInstructionsEvaluation(
        Object.assign(this.form, {
          assign_id: this.active,
          id: this.activeFeedBack,
        })
      ).then((res) => {
        if (res.code == 0) {
          this.$message.success("审核成功");
          this.initData();
        }
      });
    },
    goBack() {
      this.$router.push("/instructionsEvaluation");
    },
    /** 批示件 交办状态
     * 0未反馈
     * 1已反馈
     * 2已退回
     * 3已办结
     */
    getStepStatus(status) {
      switch (status) {
        case 0:
          return 2;
        case 1:
          return 3;
        case 2:
          return 2;
        case 3:
          return 4;
      }
    },
  },
  created() {
    this.id = this.$route.params.id;
    this.active = this.$route.params.assignId;
    this.initData();
  },
};
</script>

<style lang="scss" scoped>
.instructions-details {
  height: 100%;
  overflow-y: auto;
}
.assign-title {
  box-sizing: border-box;
  padding: 20px 0;
}
.step-wrapper {
  margin: 10px 0;
}
</style>